<template>
  <section class="payRule">
    <!-- <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" @click="newRule">新增</el-button>
    </el-row> -->
    <!--列表-->
		<el-table :data="levelOptions" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="name" label="会员等级" width="120"/>
			<el-table-column prop="number_limit" label="人数限制" width="100"/>
			<!-- <el-table-column prop="age" label="是否可返还" width="100"/>
			<el-table-column prop="birth" label="缴费方式" width="120"/>
      <el-table-column prop="birth" label="基本会费" width="120"/>
      <el-table-column prop="birth" label="职务费用" width="120"/>
      <el-table-column prop="birth" label="会员级别" width="120"/>
      <el-table-column prop="birth" label="创建时间" width="120"/> -->
			<el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toPayRuleDetail(scope.row.id,scope.row.name)">编辑规则</el-button>
          <!-- <el-button type="danger" size="mini"  @click="getUserVipDelete">删除</el-button> -->
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
      </div>
    </el-col>

  </section>
</template>

<script>
export default {
	data(){
		return {
      levelOptions: [],
      dialogVisible:false,//编辑状态的弹窗
      payModeOptions:[
                {label:'免费',value:0,disabled:false},
                {label:'一次性',value:1,disabled:false},
                {label:'分期',value:2,disabled:false}
            ],
      page:1,
      totalPage:0
		}
  },
  methods: {
    handleClose(){
      //编辑弹窗关闭前的回调

    },
    toPayRuleDetail(id,name){
      this.$router.push({
        name:'PayRuleDetail',
        query:{'id':id,'vipName':name}
      })
    },
    async getUserVipRule(){
            //获取会员等级&缴费规则接口
            const data=await this.$api.getUserVipRule({
              page:this.page,
              limit:16
            });
            if(data.data.level=='success'){
                this.levelOptions= data.data.data.vip_list
                this.totalPage=data.data.data.total
            }
    },
    pageChange(e){
			//翻页
			this.page=e;
			this.getUserVipList()
		},
    initData(){
      this.addForm={//弹窗的信息
        name:'',
        desc:'',
        canReback:'',//是否可返还
        payMode:'',//缴费方式
        exceptPrice:'',//预估价
        memberCost:'',//基本会费
        baseCost:'',//缴费标准
        level:''//会员等级
      }
    }
  },
  mounted() {
		this.getUserVipRule()
    },
}
</script>
<style lang='scss' scoped>
  .payRule{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .payRule .el-dialog__body{overflow: auto;}
</style>
